import React from 'react'
import {message} from "antd"

import {WeaLocaleProvider, WeaTools} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

import UserSetting from './userSetting'

export default class ContainerViewExtend extends React.Component{

    onAdd = (tabId)=>{
        const {id,customState,setCustomStateData} = this.props
        const {stack,selectedItems,noSelectedItems} = customState
        stack.push({method:'save',params:{"elementId":id,tabId:tabId}})
        let item  = noSelectedItems.filter((item)=>item.id == tabId)[0]
        selectedItems.push(item)
        let _noSelectedItems = noSelectedItems.filter((item)=>item.id != tabId)
        setCustomStateData({selectedItems,noSelectedItems:_noSelectedItems})

    }

    onDelete = (tabId)=>{
        const {id,customState,setCustomStateData} = this.props
        const {stack,selectedItems,noSelectedItems} = customState
        stack.push({method:'delete',params:{"elementId":id,tabId:tabId}})
        let item  = selectedItems.filter((item)=>item.id == tabId)[0]
        let isSuccess = false
        for(let i = 0 ; i< noSelectedItems.length ;i++){
            if(noSelectedItems[i].orderIndex > item.orderIndex){
                noSelectedItems.splice(i,0,item)
                isSuccess = true
                break;
            }
        }
        if(isSuccess == false){
            noSelectedItems.push(item)
        }
        let _selectedItems = selectedItems.filter((item)=>item.id != tabId)
        setCustomStateData({selectedItems:_selectedItems,noSelectedItems})

    }

    onDrop = (data)=>{
        const {customState} = this.props
        const {stack} = customState
        stack.push({method:'order',params:data})

    }

    onSave = ()=>{
        const {customState} = this.props
        const {stack} = customState
        this.executeStackHandler(stack)
    }

    executeStackHandler = (stack)=>{
        const {userJavaInterface,setCustomStateData,onCustomLoad} = this.props
        if(stack.length > 0){
            let execute = stack[0]
            const {method,params} = execute
            if(method == 'save'){
                WeaTools.callApi(userJavaInterface.save, 'POST', params).then((result) => {
                    this.nextExecuteStackHandler(stack)
                })
            }else if(method == 'delete'){
                WeaTools.callApi(userJavaInterface.delete, 'POST', params).then((result) => {
                    this.nextExecuteStackHandler(stack)
                })
            }else if(method == 'order'){
                WeaTools.callApi(userJavaInterface.order, 'POST', params).then((result) => {
                    this.nextExecuteStackHandler(stack)
                })
            }
        }else{

            setCustomStateData({stack:[]})
            onCustomLoad()
            message.success(getLabel(83551, '保存成功！'), 0.5)
            this.refs.userSetting.onClose();
        }
    }

    nextExecuteStackHandler = (stack)=>{
        stack.splice(0,1)
        this.executeStackHandler(stack)
    }

    render(){
        const {id,data,tabId,userJavaInterface,customState={},setCustomStateData,onCustomLoad} = this.props
        const {selectedItems=[],noSelectedItems=[],stack=[]} = customState
        const {items,setting}  = data
        const {row,col,settingIcon} = setting
        let appMenuCount = row*col
        if(selectedItems.length >= row*col){
            appMenuCount = row*col -1
        }
        const _selectedItems = selectedItems.slice(0,appMenuCount)
        _selectedItems.push({setting:{title:'设置',img:settingIcon,settingButton:true}})


        return (
            <div >
                {
                    _selectedItems.map((item,index)=>{
                        const {imgWidth,imgHeight,titleFontSize,titleColor,rowMargin} = setting
                        const {id,setting:_setting={}} = item
                        const {title,img,url,settingButton} = _setting

                        let dynamicCssContent = {
                            width: imgWidth+'px',
                        }
                        let dynamicCssImg = {
                            width: imgWidth+'px',
                            height: imgHeight+'px'
                        }


                        return (
                            <div className='customFeatures-viewExtend-appMenu' style={{width:parseInt(100/col)+'%','margin-top':rowMargin+'px'}}>
                                <div className='customFeatures-viewExtend-appMenu-content' style={dynamicCssContent} onClick={()=>{this.onItemClick(url,'',settingButton)}}>
                                    {
                                        img ? (
                                            <img className='customFeatures-viewExtend-appMenu-img' src={img} style={dynamicCssImg}/>
                                        ) : null
                                    }
                                    <div className='customFeatures-viewExtend-appMenu-title' style={{color:titleColor,'font-size':titleFontSize+'px'}}>{title}</div>
                                </div>

                            </div>
                        )
                    })
                }
                <UserSetting ecId={`${this && this.props && this.props.ecId || ''}_UserSetting@ixp01b`} ref="userSetting" userJavaInterface={userJavaInterface} elementId={id} selectedItems={selectedItems} noSelectedItems={noSelectedItems} stack={stack} onCustomLoad={onCustomLoad} setCustomStateData={setCustomStateData} setting={setting} onAdd={this.onAdd} onDelete={this.onDelete} onDrop={this.onDrop} onSave={this.onSave}/>
            </div>
        )
    }

    onUserSettingClick = ()=>{
        this.refs.userSetting.onShow();
    }

    onItemClick = (url,urlType,settingButton)=>{
        if(settingButton){
            this.onUserSettingClick()
        }else{
            if(url){
                window.open(url)
            }
        }
    }
}